<template>
  <div>
    <div class="report-action">
      <el-button type="primary" :loading="printLoading" @click="printPage">
        <i class="fa fa-print"></i>
        打印
      </el-button>
      <el-button
        icon="el-icon-download"
        type="primary"
        :loading="printLoading"
        @click="exportToExcel"
      >
        导出
      </el-button>
    </div>
    <div v-loading="loading" class="report-wrap">
      <div id="report-print">
        <div class="report-main">
          <table class="table">
            <tbody>
              <tr>
                <td class="border-0" colspan="6" data-font='{"sz": 16, "bold": true}'>
                  <h3 class="report-title">{{ fileName }}</h3>
                </td>
              </tr>
            </tbody>
          </table>
          <table class="table table-bordered mb-1 mt-3">
            <tbody>
              <tr>
                <td colspan="6" class="table-title">客户基本信息</td>
              </tr>
              <tr>
                <td width="14%">借款人/担保客户</td>
                <td width="20%">{{ customerData.customer_name || '-' }}</td>
                <td width="14%">客户类型</td>
                <td width="18%">{{ customerData.org_class_name || '-' }}</td>
                <td width="14%">主营业务</td>
                <td width="20%">{{ customerData.parent_main_business || '-' }}</td>
              </tr>
              <tr>
                <td>联系电话</td>
                <td>{{ customerData.corp_phone || '-' }}</td>
                <td>客户身份证号码/统一社会信用代码</td>
                <td>{{ customerData.lender_idcard || '-' }}</td>
                <td>客户住址/经营地址</td>
                <td>{{ customerData.address || '-' }}</td>
              </tr>
              <tr>
                <td>主营产业</td>
                <td>{{ customerData.main_business || '-' }}</td>
                <td>年收入(万元)</td>
                <td>{{ customerData.sale_income || '-' }}</td>
                <td>总资产(万元)</td>
                <td>{{ customerData.assets_total || '-' }}</td>
              </tr>
              <tr>
                <td colspan="6" class="table-title">担保贷款信息</td>
              </tr>
              <tr>
                <td>贷款银行分支机构</td>
                <td>{{ customerData.claim_bank_name || customerData.bank_name || '-' }}</td>
                <td>贷款金额/拟担保金额(万元)</td>
                <td>{{ customerData.warranty_amount || '-' }}</td>
                <td>贷款用途</td>
                <td>{{ customerData.funds_use_dir || '-' }}</td>
              </tr>
              <tr>
                <td>放款日/拟担保起始日</td>
                <td>{{ $utils.dateFormat(customerData.load_date, 'yyyy-MM-dd') || '-' }}</td>
                <td>到期日</td>
                <td>{{ $utils.dateFormat(customerData.load_end_date, 'yyyy-MM-dd') || '-' }}</td>
                <td>贷款期限</td>
                <td>{{ customerData.warranty_period || '-' }}</td>
              </tr>
              <tr>
                <td>借款合同编号</td>
                <td>{{ customerData.gua_contract || '-' }}</td>
                <td>贷款年利率</td>
                <td>{{ customerData.load_rate || '-' }}</td>
                <td>担保方式</td>
                <td>{{ customerData.warranty_method || '-' }}</td>
              </tr>
              <tr>
                <td>是否购买农业保险</td>
                <td>{{ enumDispute[customerData.is_buy_insurance] || '-' }}</td>
                <td>是否为扶贫项目</td>
                <td>{{ enumDispute[customerData.is_poverty_project] || '-' }}</td>
                <td>-</td>
                <td>-</td>
              </tr>
              <tr>
                <td rowspan="2">征信情况</td>
                <td rowspan="2">
                  {{
                    customerData.overdue_count && Number(customerData.overdue_count) > 0
                      ? '异常'
                      : '正常'
                  }}
                </td>
                <td colspan="2">逾期次数</td>
                <td colspan="2">{{ customerData.overdue_count || '-' }}</td>
              </tr>
              <tr>
                <td colspan="2">逾期合计金额（万元）</td>
                <td colspan="2">{{ customerData.overdue_funds || '-' }}</td>
              </tr>
              <tr>
                <td>备注</td>
                <td colspan="5" class="text-left" style="text-indent: 2rem">
                  {{ customerData.remark || '-' }}
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { excelTablesExport, printHtml } from '@vimi/utils-tool'
import { enumDispute } from '@/bank/plugins/enum'

export default {
  components: {},
  props: {
    oneIndustry: {
      type: Object,
      default: () => {},
    },
    relatedId: String,
    guaType: { type: String, default: '3' },
  },
  data() {
    return {
      enumDispute,
      customerData: {},
      tableName: 'datum_one_county_industry',
      printLoading: false,
      loading: false,
    }
  },
  computed: {
    submitType() {
      return +this.guaType !== 3
    },
    fileName() {
      return this.submitType
        ? `${this.customerData.customer_name || ''}数字档案卡`
        : '十二大农业特色产业贷数字档案卡'
    },
  },
  watch: {
    oneIndustry: {
      handler: function () {
        this.customerData = { ...this.oneIndustry }
      },
      deep: true,
      immediate: true,
    },
    relatedId() {
      this.getData()
    },
    guaType() {
      this.getData()
    },
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      if (!this.relatedId || !this.guaType) {
        return
      }
      this.loading = true
      this.tableName = +this.guaType === 3 ? 'datum_one_county_industry' : 'market_project'
      const params = { 'customer_related_id.eq': this.relatedId }
      this.$api
        .getData(this.$serviceName, this.tableName, params)
        .then(res => {
          this.customerData = (res && res.data && res.data[0]) || {}
        })
        .finally(() => {
          this.loading = false
        })
    },
    // 打印
    printPage() {
      printHtml(
        document.getElementById('report-print').innerHTML,
        `
        .report-title {text-align: center;margin-bottom: 1rem;font-weight: bold;font-size: 1.5rem;line-height: 1.5;}
        .report-main {margin-bottom: 1rem;margin: 0 auto;padding: 2rem;}
        .table-bordered td {border-color: #333 !important;padding: 0.25rem;text-align: center;vertical-align: middle;}
        .table-bordered {outline: 2px solid #333;}
      `
      )
    },
    // 导出
    exportToExcel() {
      this.printLoading = true
      excelTablesExport('report-print', this.fileName, {
        emptyRows: 0,
        styles: {
          // 全局样式
          border: {
            left: { style: 'thin' },
            top: { style: 'thin' },
            right: { style: 'thin' },
            bottom: { style: 'thin' },
          },
          alignment: {
            vertical: 'center',
            horizontal: 'center',
            wrapText: true,
          },
        },
        // 单元格样式，最顶级设置(styles -> dataset -> cellStyles)
        // 可以设置成 A1，或 'r-c' 的主键
        cellStyles: {
          A1: { border: {} },
          B1: { border: {} },
          C1: { border: {} },
          '0-3': { border: {} },
          '0-4': { border: {} },
          '0-5': { border: {} },
          '0-6': { border: {} },
          '0-7': { border: {} },
          '0-8': { border: {} },
          '0-9': { border: {} },
          '0-10': { border: {} },
        },
      })
        .catch(err => {
          const msg = (err && err.message) || ''
          this.$message.error(`导出失败，请重试！${msg}`)
        })
        .finally(() => {
          this.printLoading = false
        })
    },
  },
}
</script>

<style lang="scss" scoped>
$report-width: 100%;
.report-action {
  width: $report-width;
  margin: 1rem auto;
}
.report-wrap {
  width: $report-width;
  margin: 0 auto;
  padding: 2rem;
  border: 1px solid #e9ecef;
  border-radius: 2px;
  background-color: #fff;
  .report-title {
    text-align: center;
    margin-bottom: 1rem;
    font-weight: bold;
    font-size: 1.45rem;
    line-height: 1.5;
  }
  .table-title {
    text-align: center;
    margin-bottom: 1rem;
    font-weight: bold;
    font-size: 1.2rem;
  }
}
.table-bordered td {
  border: 1px solid;
  border-color: #333;
  padding: 0.25rem;
  text-align: center;
  vertical-align: middle;
}
.table-bordered {
  outline: 1px solid #333;
}
</style>
